<template>
	<div class="app-container">
		<div class="bgWhite radius8 pt25">
			<div class="pl30 fb fs16 border-bottom pb25">
				秘籍宝典
			</div>
			<div class="p30">
				<div class="inputCask flex col-center row-between pl20">
					<img width="24" src="@/assets/images/Search.png" alt="" />
					<el-input
					v-model="keyword"
					placeholder="请输入名称或其他关键字搜索..."
					clearable
					class="elInput"
					size="large"
					/>
					<el-button class="btnSearch" type="defaultBtn" @click="handleQuery">搜索</el-button>
				</div>
				<div class="mt30">
					<el-row :gutter="20" >
					  <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item,index) in list" :key="index" class="mb20">
						  <div class="text-center treasureItem flex col-center row-center cursor"
						  @click="handleList(item)"
						  >
							  <div>
								  <img width="74" height="74" src="@/assets/images/Img.png" alt="" />
								  <div class="mt10 fb">{{item.categoryName}}</div>
								  <div class="fs14 color2 mt5 text-line-1" style="width: 200px;">{{item.remark}}</div>
								  <div class="main-color fs14 mt5">{{item.cheatsCount}}条秘籍</div>
							  </div>
						  </div>
					  </el-col>
					</el-row>
					<div class="text-center mt20">
						<span class="loadMore cursor" @click="loadMore()">{{total == list.length ? '没有更多了' : '加载更多'}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>		
</template>

<script>
	import {
		cheatsCategorylist
	} from '@/api/business/screct.js'
	import { Search } from '@element-plus/icons-vue'
	export default{
		data(){
			return{
				keyword:'',
				total:0,
				queryParams:{
					pageNum:1,
					pageSize:10,
				},
				list:[]
			}
		},
		created() {
			this.getList()
		},
		methods:{
			// 搜索
			handleQuery(){
				// 假设 this.$router 是 VueRouter 实例
				// this.$router.push(`/user/${encodeURIComponent('张三')}`);
				this.$router.push(`/sort/searchSort?keyword=${encodeURIComponent(this.keyword)}`)
			},
			getList(){
				cheatsCategorylist(this.queryParams).then(res=>{
					this.list = this.list.concat(res.rows)
					this.total = res.total
				})
			},
			// 加载更多
			loadMore(){
				if(this.total == this.list.length){
					return false
				}
				this.queryParams.pageNum+=1
				this.getList()
			},
			handleList(item){
				this.$router.push('/secret/sort?id='+item.id+'&title='+ encodeURIComponent(item.categoryName))
				
			}
		}
	}
</script>

<style lang="scss">
	.inputCask{
		width: 928px;
		height: 56px;
		border-radius: 12px;
		background: rgba(250, 250, 250, 1);
		margin: 0 auto;
		.elInput{
			height: 56px;
		}
		.btnSearch{
			width: 96px;
			height: 56px;
			border-radius: 12px;
		}
		
	}
	/* 去掉Element UI Input组件的边框 */
	.el-input--large .el-input__wrapper {
	  border: none !important;
	  box-shadow: none !important;
	  background: rgba(250, 250, 250, 1);
	}
	.treasureItem{
		border: 1px solid #DCDFE6;
		width: 244px;
		height: 224px;
	}
	.loadMore{
		padding: 0 10px;
		height: 32px;
		border-radius: 4px;
		border: 1px solid #D9D9D9;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
	}
</style>